<template>
	<div class="wrap flex-center">
		<div class="header-box">
			<div class="header flex">
				<!-- <img src="@imgs/logo.png" class="logo" /> -->
				<!-- <img src="@imgs/logo.png" class="logo" /> -->
				<div class="text">欢迎来到商城管理端！</div>
			</div>
		</div>
		<div class="inner-content">
			<div class="inner">
				<div class="title">登录</div>
				<div class="input-box">
					<span>用户名</span>
					<input type="text" placeholder v-model="form.username" @keyup.enter="do_login()"/>
				</div>
				<div class="input-box">
					<span>密码</span>
					<input type="password" placeholder v-model="form.password" @keyup.enter="do_login()"/>
				</div>
				<div class="btn-box">
					<button @click="do_login()">登录</button>
				</div>
			</div>
		</div>
		<div class="footer-box">
			<!-- <a href="https://beian.miit.gov.cn/" target="_blank">备案号</a> -->
			<div class="html-box" v-html="beian_info">
				
			</div>
		</div>
	</div>
</template>

<script>
	import permission from '@/store/permission';
	export default {
		name: "servicePage",
		components: {},
		data() {
			return {
				form: {
					username: "", //manager
					password: "", //123456
				},
				
				beian_info: ''
			};
		},
		computed: {},
		created() {
			this.query_config()
		},


		methods: {
			query_config() {
				this.$api({
					url: '/',
					method: 'get',
					data: {
						action: "setting_getConfig",
					}
				}).then((res) => {
					if (res.code == 200) {
						if (res.data.comBeian) {
							this.beian_info = res.data.comBeian
						}
					}
				});
			},


			do_login() {
				// let { phone, password } = this.form;
				// let phoneReg = /^1[3-9]\d{9}$/;
				if (!this.form.username) {
					alert("请输入账号");
					return;
				}
				if (!this.form.password) {
					alert("请输入密码");
					return;
				}

				this.$api({
					url: '/',
					method: 'get',
					data: {
						action: "manager_login",
						username: this.form.username,
						password: this.form.password,
					}
				}).then((res) => {
					this.$logjson("登录", res);
					if (res.code == 200) {
						this.$store.commit("setAdminAccount", res.data);
						//
						this.$api({
							url: '/admin_service.php',
							method: 'get',
							data: {
								action: "manager_getUserInfo",
							}
						}).then((res) => {
							console.log("动态获取用户信息", res);
							if (res.code == 200) {
								this.$store.commit("setAdminUserInfo", res.data);
								localStorage.setItem("is_permission_refresh", 0)
								
								 
								
								if (res.data.isSup) {
									//超级管理员
									this.$router.push("/product-list");
								} else {
									//其他角色
									permission.query_user_permission(this.permission_callback)
								}
							} else {
								alert(res)
							}
						});
					} else {
						alert(res)
					}
				});
			},
			// 权限回调
			permission_callback(info) {
				let {
					flat_auth_menu_list
				} = info
				this.$router.push("/" + flat_auth_menu_list[0].routeAddress);
			},
		},
	};
</script>

<style scoped lang="less">
	.wrap {
		position: relative;
		width: 100vw;
		height: 100vh;
		background: url("~@imgs/bg-login.jpg") no-repeat center / cover;


		.header-box {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;

			.header {
				width: 1920px;
				width: 100%;
				height: 80px;
				background: #000000;
				padding: 20px 60px;


				.logo {
					margin-right: 80px;
					height: 42px;
					cursor: pointer;
				}

				.text {

					font-size: 20px;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 28px;
					color: #ffffff;
					letter-spacing: 2px;
				}
			}
		}

		.inner-content {
			width: 480px;
			height: 420px;
			background: #ffffff;
			box-shadow: 0px 10px 20px rgba(181, 151, 132, 0.2);
			opacity: 1;
			border-radius: 10px;
			padding: 30px 40px;

			.inner {
				width: 100%;
				height: 100%;

				.title {
					font-size: 32px;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 24px;
					color: #000000;
				}

				.input-box {
					margin-top: 40px;
					width: 100%;
					height: 50px;
					background: #ffffff;
					border: 1px solid #eeeeee;
					opacity: 1;
					border-radius: 4px;

					.flex-between();

					span {
						display: inline-block;
						width: 90px;
						/*no */
						border-right: 1px solid #000;

						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						line-height: 20px;
						color: #000;
					}

					input {
						flex: 2;
						height: 100%;
						padding-left: 20px;
						font-size: 16px;
						color: #000;
						border: none;
					}
				}

				.agree-box {
					text-align: left;
					margin: 40px 0;
					.flex-between();

					font-size: 14px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					line-height: 24px;
					color: #999999;

					a {
						color: #000;
					}
				}

				.btn-box {
					margin-top: 80px;

					button {
						width: 400px;
						height: 60px;
						background: #000000;

						background: #954024;

						font-size: 16px;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 24px;
						color: #ffffff;
						letter-spacing: 5px;
					}
				}
			}
		}
	}

	.footer-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 35px;
		line-height: 35px;
		background: rgba(0, 0, 0, 0.5);

		a {
			font-size: 14px;
			color: #ffffff;

			&:hover {
				color: coral;
			}
		}
		
		/deep/ a {
			font-size: 14px;
			color: #ffffff;
		
			&:hover {
				color: coral;
			}
		}
	}
</style>